<template>
  <div class="Integraldaily_container">
    <!-- 搜索条件 -->
    <div class="nav">
      <Row>
        <Col span="24">
          <h2 class="addcustomergroup_title">积分日常报表</h2>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <div class="Integraldaily">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
              <Row>
                <Col span="8">
                  <FormItem label="选择颗粒度：">
                    <Row>
                      <Col span="5">
                         <RadioGroup type="button" v-model="formValidate.time_type"  class="buttongroup">
                            <Radio label="1" >日</Radio>
                            <Radio label="2" >周</Radio>
                            <Radio label="3" >月</Radio>
                            <Radio label="4" >年</Radio>
                          </RadioGroup>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
                <Col span="8" pull="2">
                  <FormItem label="选择时间：">
                    <Row>
                      <Col span="5">
                        <FormItem prop="start_time" :label-width="120">
                          <DatePicker
                            type="datetime"
                            format="yyyy-MM-dd"
                            placeholder="请选择日期"
                            :value="formValidate.start_time"
                            @on-change="formValidate.start_time=$event"
                            style="width:10vw;"
                          ></DatePicker>
                        </FormItem>
                      </Col>
                    <Col span="7" style="text-align: center" push="6">~</Col>
                      <Col span="6" push="5">
                        <FormItem prop="end_time" :label-width="120">
                          <DatePicker
                            type="datetime"
                            format="yyyy-MM-dd"
                            placeholder="请选择日期"
                            :value="formValidate.end_time"
                            @on-change="formValidate.end_time=$event"
                            style="width:10vw;"
                          ></DatePicker>
                        </FormItem>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
              </Row>
              <Row style="margin-top:2vh;">
                <FormItem style="margin-left:-5vw;">
                  <Row>
                    <Col span="8">
                      <Button type="success" style="width:10vw;" @click="getReportPointStatementList">查询</Button>
                    </Col>
                    <Col span="3" push="12">
                      <Button type="success" style="width:10vw;margin-left:1vw;" @click="exportData()">下载</Button>
                    </Col>
                  </Row>
                </FormItem>
              </Row>
            </Form>
          </div>
        </Col>
      </Row>
    </div>

    <div class="table_container">
      <Table :columns="columns" height="300"  :data="formList" border size="small" ref="table" style="width:100%"></Table>
    </div>
  </div>
</template>
<script>
import {
  getReportPointStatement,
  exportPointStatement,
  fetchChannelList
} from "@/api/report";

export default {
  name: "Integraldaily",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      reportList: [],
      timeList: [],
      formList: [],
      nameList: [],
      channels: [],
      endtime:'',
      starttime:'',
      formValidate: {
        // 查询参数
        start_time: "",
        end_time: "",
        channel_id: "",
        time_type: "1"
      },
      ruleValidate: {},
      columns: [
        {
          title: "日期",
          key: "date_str",
          align: "center",
          minWidth:110
        },
        {
          title: "总积分",
          align: "center",
          children: [
            {
              title: "剩余积分",
              key: "point",
              align: "center",
              minWidth:150,
            },
            {
              title: "新增积分",
              key: "earn_point",
              align: "center",
              minWidth:150,     
            },
            {
              title: "消耗积分",
              key: "burn_point",
              align: "center",
              minWidth:150,
            },
            {
              title: "新增积分人数",
              key: "earn_point_member_count",
              align: "center",
              minWidth:150
            },
            {
              title: "消耗积分人数",
              key: "burn_point_member_count",
              align: "center",
              minWidth:150
            }
          ]
        },
        {
          title: "销售积分",
          align: "center",
          children: [
            {
              title: "销售积分",
              key: "purchase_point",
              align: "center",
              minWidth:150,
            },
            {
              title: "销售积分人数",
              key: "purchase_point_member_count",
              align: "center",
              minWidth:150
            }
          ]
        },
        {
          title: "互动积分",
          align: "center",
          children: [
            {
              title: "互动积分",
              key: "interaction_point",
              align: "center",
              minWidth:150,
            },
            {
              title: "互动人数",
              key: "interaction_point_member_count",
              align: "center",
              minWidth:150,
            }
          ]
        },
        {
          title: "积分消耗",
          align: "center",
          children: [
            {
              title: "兑礼积分",
              key: "redeem_gift_point",
              align: "center",
              minWidth:150,
            },
            {
              title: "兑礼人数",
              key: "redeem_gift_point_member_count",
              align: "center",
              minWidth:150,
            },
            {
              title: "优惠券兑礼积分",
              key: "redeem_coupon_point",
              align: "center",
              minWidth:150,
            },
            {
              title: "优惠券兑礼人数",
              key: "redeem_coupon_point_member_count",
              align: "center",
              minWidth:150,
            }
          ]
        }
      ]
    };
  }, 
  created() {
    this.channelList();
  },
  methods: {
      exportData() {
      this.$refs.table.exportCsv({
          filename: "积分日常报表"
        });
    },

    //渠道
    channelList() {
      fetchChannelList().then(res => {
        if (res.data.code == 200) {
          if (res.data.data) {
            this.channels = res.data.data;
          }
        } else {
          this.$Message.error("操作失败");
        }
      });
    },
    
    // 查询
    getReportPointStatementList() {
      if (this.formValidate.time_type == ''){
        this.$Message.error("请选择颗粒度");
        return;
      }
      if(this.formValidate.time_type==1){
        if(this.formValidate.end_time - this.formValidate.start_time > 7){
           this.$Message.error('颗粒度为周最多选择7天');
           return;
        }
      }
      if(this.formValidate.start_time == ""){
        this.$Message.error('请选择时间段');
        return;
      }
      if(this.formValidate.end_time == ""){
        this.$Message.error('请选择时间段');
        return;
      }
      if(this.formValidate.start_time > this.formValidate.end_time){
        this.$Message.error('开始时间必须小于结束时间');
        return;
      }
      var reqParams = {
        time_type: this.formValidate.time_type,
        start_time: this.formValidate.start_time,
        end_time: this.formValidate.end_time,
        // channel_id: this.formValidate.channel_id
      };
      getReportPointStatement(reqParams).then(res => {
        if (res.data.code == 200) {
          this.formList = res.data.result.formList;
        }else if(res.data.code == 401){
            this.$Message.error(res.data.msg);
          } else {
          this.$Message.error("操作失败");
        }
      });
    },

    getNowFormatDate() {
      var date = moment().format("YYYY-MM-DD"); //当前时间
      var CurDate = moment().subtract(2, "days").format("YYYY-MM-DD"); //当前时间的前2天时间
      var startDate = moment().subtract(5, "days").format("YYYY-MM-DD"); //当前时间的前5天时间
      this.formValidate.start_time = startDate;
      this.formValidate.end_time = CurDate;
    }, 
  },
  mounted() {
    this.getNowFormatDate();
    var time = setInterval(() => {
      this.getNowFormatDate();
    }, 86400000);
    this.getReportPointStatementList();
  },
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.Integraldaily_container {
  @include container_global;
  background-color: #fff;
  .active {
    color: #68b6ff;
    border: 1px solid #8fc3ff;
    background-color: #e6f2ff;
  }
  .nav {
    height: 25vh;
    width: 100%;
    line-height: 35px;
    background-color: #fff;
    position: relative;
    .addcustomergroup_title {
      height: 7vh;
      font-weight: bolder;
    }
    .buttongroup {
      display: flex;
      justify-content: flex-start;
    }
  }
  .table_container {
    // margin-top: -5vh;
    .table {
      min-height: 40vh;
    }
  }
  .page {
    @include page_global;
  }
}
</style>
